<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '../../http/api'
import Cookies from 'js-Cookie'
import img_web from '../../../static/img/login-bg-web.jpg'
import logo from '../../../static/img/logo.jpg'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import cascader from '../../components/cascader/index.vue'


const router = useRouter()



interface T {
    username: string,
    password: string,
    checkPass: string,
    city_id: number,
    district_id: number,
    city: string,
    district: string,
    user_type: string,
    genderFlag: boolean
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<T>({
    password: '',
    checkPass: '',
    username: '',
    city_id: -1,
    district_id: -1,
    city: '',
    district: '',
    genderFlag: true,
    user_type: ''
})
const validateName = (_rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入姓名'))
    }
    setTimeout(() => {
        callback()
    }, 200)
}

const validateArea = (_rule: any, value: any, callback: any) => {

    if (!value) {
        return callback(new Error('请选择地区'))
    }
    setTimeout(() => {
        callback()
    }, 200)
}
const validatePass = (_rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}
const validatePass2 = (_rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码！'))
    } else if (value !== ruleForm.password) {
        callback(new Error("两次密码不一致!"))
    } else {
        callback()
    }
}
const validateIdentity = (_rule: any, value: any, callback: any) => {
    if (value === '') {

        callback(new Error('请选择身份！'))
    } else {
        callback()
    }
}
const rules = reactive({
    username: [{ validator: validateName, trigger: 'blur' }, { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }],

    city: [{ validator: validateArea, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }, { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }],
    user_type: [{ validator: validateIdentity, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }, { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }],
})

// const submitForm = (formEl: FormInstance | undefined) => {
//     if (!formEl) return
//     formEl.validate((valid) => {
//         console.log("aaa")
//         register({ city_id: 22, district_id: 306, username: "孙同学", password: "心理健康", city: "佛山市", district: "顺德区", mail: "12124673t31232@google.com", gender: "M", phone: "12226626912", user_type: "0" })


//     })
// }


const loading = ref<boolean>(false)
const submitForm = (formEl: FormInstance | undefined) => {      //注册
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            loading.value = true

            const { password, city_id, district_id, username, city, district, genderFlag, user_type } = ruleForm
            const gender: string = genderFlag ? 'M' : "F"
            await register({ password, city_id, district_id, username, city, district, gender, user_type }).then((res: any) => {
                if (res.code === 611111) {
                    Cookies.set('city_id', res.user_info.city_id, { expires: 1 })
                    Cookies.set('district_id', res.user_info.district_id, { expires: 1 })
                    Cookies.set('user_id', res.user_info.id, { expires: 1 })
                    Cookies.set('username', res.user_info.username, { expires: 1 })
                    Cookies.set('gender', res.user_info.gender, { expires: 1 })
                    Cookies.set('city', res.city, { expires: 1 })
                    Cookies.set('district', res.district, { expires: 1 })
                    Cookies.set('user_type', res.user_info.user_type, { expires: 1 })
                    Cookies.set('super_admin', res.user_info.super_admin, { expires: 1 })
                    Cookies.set('high_admin', res.user_info.high_admin, { expires: 1 })
                    Cookies.set('mid_admin', res.user_info.mid_admin, { expires: 1 })
                    Cookies.set('AccessToken', res.access, { expires: 1 })
                    Cookies.set('RefreshToken', res.refresh, { expires: 1 })
                    Cookies.set('LoginState', 'true', { expires: 1 })
                    router.push({ name: 'nav' })
                }
                else if (res.code === 600012) {
                    ElMessage.error("请勿重复注册")
                }
            })
            loading.value = false
        } else {
            return false
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const change = (data: any) => {
    ruleForm.city_id = data[1][0]
    ruleForm.district_id = data[1][1]
    ruleForm.city = data[2][0]
    ruleForm.district = data[2][1]
}

const linkTo = () => {
    router.push({ name: "login" })
}
</script>

<template>
    <div class="page">
        <!-- <img v-if="phoneflag" :src="img_phone" alt=""> -->
        <img :src="img_web" alt="">
        <div class="headweb" element-loading-background="rgba(122, 122, 122, 0.8)">
            <div class="logo">
                <div>
                    <img @click="router.push({ name: 'index' })" :src="logo" alt="" class="img">
                    <div>注册</div>
                </div>
                <el-button type="success" @click="router.push({ name: 'index' })">回到首页</el-button>
            </div>
            <el-form :model="ruleForm" label-width="80px" ref="ruleFormRef" :rules="rules">
                <el-form-item label="姓名:" class="" prop="username">
                    <el-input v-model="ruleForm.username" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="身份:" class="" prop="user_type">
                    <el-select placeholder="请选择身份" v-model="ruleForm.user_type" clearable>
                        <el-option label="老师" value="1"></el-option>
                        <el-option label="学生" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="地区:" class="" prop="city">
                    <cascader :msg="'area'" @change="change" :placeholder="'!!! 请选择学校所在的地区 !!!'" />


                </el-form-item>
                <el-form-item label="性别:" class="" prop="city">

                    <el-switch v-model="ruleForm.genderFlag"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" inline-prompt active-text="男"
                        inactive-text="女" />
                </el-form-item>

                <el-form-item label="密码:" prop="password">
                    <el-input v-model="ruleForm.password" type="password" maxlength="18" placeholder="请输入密码"
                        show-password />
                </el-form-item>
                <el-form-item label="确认密码:" prop="checkPass">
                    <el-input v-model="ruleForm.checkPass" type="password" maxlength="18" placeholder="请再次输入密码"
                        show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading">注册</el-button>
                    <el-button @click="linkTo">已有账号？点击登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    >img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }

    .headweb {
        position: absolute;
        width: 500px;
        height: 500px;
        box-sizing: border-box;
        top: calc(50% - 250px);
        left: calc(50% - 250px);
        display: flex;
        flex-direction: column;
        // border: 5px solid rgb(54, 171, 161);
        background-color: rgb(201, 227, 228);
        border-radius: 10px;
        color: #000;

        // .el-form-item {
        //     margin-bottom: 40px;
        // }

        .logo {
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
            font-size: 20px;
            display: flex;
            width: 100%;
            align-items: center;
            padding: 20px 40px 40px 40px;
            box-sizing: border-box;
            justify-content: space-between;

            >:nth-child(1) {
                display: flex;
                align-items: center;
            }

            .img {
                cursor: pointer;
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }
        }
    }

    .headphone {
        position: absolute;
        width: 90vw;
        // height: 50vh;
        box-sizing: border-box;
        top: 10vh;
        left: calc(50% - 45vw);
        display: flex;
        flex-direction: column;
        border: 5px solid rgb(54, 171, 161);
        background-color: rgb(55, 59, 68);
        border-radius: 10px;
        color: yellow;

        .logo {
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
            font-size: 20px;
            display: flex;
            width: 120px;
            align-items: center;
            margin: 2vh 0 2vh 5vw;

            >.img {
                cursor: pointer;
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }
        }
    }

    .el-form {
        width: 80%;
        margin-left: 10%;

        :deep(.el-form-item__label) {
            color: #000;
            width: 100px !important;
        }
    }
}
</style>